<template>
	<div>
		<van-nav-bar
			title="影院"
			@click-left="onClickLeft"
			@click-right="onClickRight"
			fixed
		>
			<template #left>
				{{ $store.state.cityName
				}}<van-icon name="arrow-down" size="20" color="black" />
			</template>
			<template #right>
				<van-icon name="search" size="20" color="black" />
			</template>
		</van-nav-bar>

		<div class="cinemaslist">
			<van-list>
				<van-cell v-for="item in $store.state.cinemaList" :key="item.cinemaId">
					<div class="CityAll" @click="Cityto(item.cinemaId)">
						<div class="item_left">
							<div>{{ item.name }}</div>
							<div>{{ item.address }}</div>
						</div>
						<div class="item_right">
							<div style="font-size: 12px">￥{{ item.lowPrice / 100 }}起</div>
							<div>距离未知</div>
						</div>
					</div>
				</van-cell>
			</van-list>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			finished: false,
			height: 0,
		}
	},
	methods: {
		onClickLeft() {
			this.$router.push('/city')
			this.$store.commit('clearCinemaList')
		},
		onClickRight() {
			this.$router.push('/cinemas/serch')
		},
	},
	mounted() {
		this.height = document.documentElement.clientHeight - 100 + 'px'
		if (this.$store.state.cinemaList.length === 0) {
			//vuex异步流程
			this.$store.dispatch('getCinemaList', this.$store.state.cityId)
		} else {
			console.log('缓存')
		}

		// 加载状态结束
		this.loading = false
		// 数据全部加载完成
		if (this.$store.state.cinemaList.length >= 40) {
			this.finished = true
		}
	},
}
</script>

<style lang="less" scoped>
.cinemaslist {
	margin-top: 50px;
	.CityAll {
		width: 100%;
		padding: 15px;
		height: 75px;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		border: 1px solid #999;
		.item_left {
			width: 80%;
			float: left;
			div:nth-child(1) {
				color: #191a1b;
				font-size: 15px;
			}
			div:nth-child(2) {
				color: #797d82;
				font-size: 12px;
				margin-top: 5px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.item_right {
			width: 20%;
			text-align: right;
			div:nth-child(1) {
				color: #ff5f16;
				font-size: 15px;
			}
			div:nth-child(2) {
				font-size: 11px;
				color: #797d82;
			}
		}
	}
}
</style>
